import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("基本样式定制")

    ComboBox {
        id: styledCombo
        width: 200
        anchors.centerIn: parent
        model: ["简约", "现代", "古典", "工业"]

        background: Rectangle {
            implicitWidth: 200
            implicitHeight: 40
            color: styledCombo.down ? "#d0d0d0" : "#f0f0f0"
            border.color: styledCombo.activeFocus ? "#999999" : "#f0f0f0"
            border.width: styledCombo.activeFocus ? 2 : 1
            radius: 4
        }

        contentItem: Text {
            text: styledCombo.displayText
            font: styledCombo.font
            color: styledCombo.activeFocus ? "blue" : "black"
            verticalAlignment: Text.AlignVCenter
            leftPadding: 10
        }

        indicator: Canvas {
            x: styledCombo.width - width - 10
            y: styledCombo.topPadding + (styledCombo.availableHeight - height) / 2
            width: 12
            height: 8

            onPaint: {
                var ctx = getContext("2d")
                ctx.reset()
                ctx.moveTo(0, 0)
                ctx.lineTo(width, 0)
                ctx.lineTo(width / 2, height)
                ctx.closePath()
                ctx.fillStyle = styledCombo.pressed ? "blue" : "gray"
                ctx.fill()
            }
        }

        popup: Popup {
            y: styledCombo.height
            width: styledCombo.width
            implicitHeight: contentItem.implicitHeight
            padding: 1

            contentItem: ListView {
                clip: true
                implicitHeight: contentHeight
                model: styledCombo.popup.visible ? styledCombo.delegateModel : null
                currentIndex: styledCombo.highlightedIndex

                ScrollIndicator.vertical: ScrollIndicator { }
            }

            background: Rectangle {
                border.color: "#f0f0f0"
                radius: 4
            }
        }
    }
}
